<template>
  <div class="list">
    <div
      class="list-item"
      @click="goDetail(item.id)"
      v-for="item in props.dataList"
      :key="item.id"
    >
      <div class="img">
        <div class="left-icon" v-if="isShowSta">
          <p class="title">SAT</p>
          <p class="num">17</p>
        </div>
        <div class="img-wrap">
            <img :src="item.imageUrl" alt="" />
        </div>
      </div>
      <div class="content">
        <div class="title">
          {{ item.realtimeinfoName }}
        </div>
        <div class="date">
          <p class="svg" v-if="isShowTime">
            <svg-icon name="calendar" class="svg-style"></svg-icon>
          </p>
          <p>
            {{ formatDate(item.createTime) }}
          </p>
        </div>
        <div class="description">
          {{ item.remark }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { formatDate } from "~/utils/utils";
const props = defineProps({
  isShowSta: {
    type: Boolean,
    default: false,
  },
  isShowTime: {
    type: Boolean,
    default: false,
  },
  dataList: {
    type: Array,
    default: [],
  },
});

watch(
  () => props.dataList,
  (newVal) => {},
  { immediate: true, deep: true }
);

const emits = defineEmits(["handleGoDetail"]);
const goDetail = (consultationId) => {
  emits("handleGoDetail", consultationId);
  // const router = useRouter();
  // const localePath = useLocalePath();
  // router.push(localePath(`/web/consultation/${consultationId}`));
};
</script>

<style lang="less" scoped>
.list {
  width: 100%;

  .list-item {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;

    &:hover .img img {
        transform: scale(1.05);
    }

    .img {
      margin-right: 30px;
      display: flex;
      &-wrap {
        width: 575px;
        height: 358px;
        overflow: hidden;
      }
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .2s ease-out;
      }

      .left-icon {
        margin-right: 39px;

        .title {
          font-family: PingFang HK, PingFang HK;
          font-weight: 500;
          font-size: 14px;
          color: #1e2021;
          line-height: 21px;
          text-align: left;
        }

        .num {
          font-family: PingFang HK, PingFang HK;
          font-weight: 600;
          font-size: 26px;
          color: #1e2021;
          line-height: 39px;
          text-align: left;
        }
      }
    }

    .content {
      flex: 1;

      .title {
        font-family: PingFang HK, PingFang HK;
        font-weight: 500;
        font-size: 24px;
        color: #1e2021;
        line-height: 29px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .date {
        font-family: Mulish, Mulish;
        font-weight: 400;
        font-size: 12px;
        color: #656c7e;
        line-height: 13px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 30px 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .svg {
          margin-right: 10px;

          .svg-style {
            color: #db8b1b;
            width: 16px;
            height: 16px;
          }
        }
      }

      .description {
        font-family: PingFang HK, PingFang HK;
        font-weight: 400;
        font-size: 16px;
        color: #656c7e;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        max-height: 180px; // 设置最大高度为3行
        display: -webkit-box;
        -webkit-line-clamp: 9;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
